<template>
    <view class="pool">
        <swiper class="swiper" circular indicator-dots indicator-active-color="#FFB8B8" indicator-color="#fff"
            previous-margin="80px" next-margin="80px">
            <swiper-item v-for="item in list" :v-key="item.id"
                :class="{ 'swiper-item': true, 'active': currIndex == item.id }">
                <view class=" wish-item" @click="toWish(item)">
                    <view>
                        <img :src="item.imgList.length > 0 ? item.imgList[0].picPath : ''" />
                    </view>
                    <view>
                        <text class="content">{{ item.inputNameContent }}</text>
                    </view>
                    <view class="user">
                        <text class="user-name">{{ item.createName }}</text>
                    </view>
                    <view v-if="item.status" class="wish-status">
                        <text>{{
                            item.status == 0
                            ? '心愿无效(拒绝)'
                            : item.status == 1
                                ? '心愿审核中'
                                : item.status == 2
                                    ? '心愿有效中'
                                    : item.status == 3
                                        ? '心愿己完成'
                                        : ''
                        }}</text>
                    </view>
                    <view v-else class="wish-status wait">
                        <text>许下心愿</text>
                    </view>
                </view>
            </swiper-item>


        </swiper>
        <view class="btn" @click="toPush">许下心愿</view>
    </view>
</template>
<script lang="ts" setup>
import api from '@/apis/api';
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { onMounted, reactive, ref, onUnmounted } from 'vue';
let list = ref([])
let currIndex = ref(0);
onPullDownRefresh(() => {
    getWishPool().finally(() => {
        uni.stopPullDownRefresh()
    })
})

function getWishPool() {
    return api.getWishPool().then(({ data }) => {
        list.value = data.slice(0, 10)
    })
}

onMounted(() => {
    getWishPool()
})

function toWish(data) {
    uni.navigateTo({
        url: `/pages/wish/index?id=${data.id}`
    })
}
function toPush() {
    uni.switchTab({
        url: '/pages/push/push'
    })
}

</script>
    
<style lang="scss" scoped>
page {
    background-image: url('@/assets/images/pool_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.pool {
    .btn {
        width: 340rpx;
        height: 95rpx;
        text-align: center;
        line-height: 95rpx;
        font-size: 32rpx;
        border-radius: 268rpx;
        position: absolute;
        color: #fff;
        background: linear-gradient(180deg, #FFB18D 0%, #FD6564 100%);
        box-shadow: 0px 8px 20rpx 0px #FD8B81;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 10%;
    }
}

.swiper {
    height: 800rpx;
    font-family: PingFangSC-Regular-Regular;
    position: absolute;
    top: 20%;
    width: 100%;

    .swiper-item {
        display: flex;
        justify-content: center;
        margin-top: 40rpx;

    }

    .wish-item {
        width: 330rpx;
        height: 550rpx;
        background-color: #fff;
        padding: 24rpx;
        text-align: center;
        border-radius: 28rpx;
        box-shadow: 0px 0px 22rpx 0px #FFEFEF;

        img {
            border-radius: 20rpx;
            width: 280rpx;
            height: 280rpx;
        }

        .content {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-top: 34rpx;
        }

        .user {
            margin-top: 26rpx;

            .user-name {
                color: #666666;
                font-size: 28rpx;

            }
        }

        .wish-status {
            width: 190rpx;
            height: 65rpx;
            margin: auto;
            line-height: 65rpx;
            text-align: center;
            border-radius: 14rpx;
            background: rgba(255, 186, 184, .2);
            color: #FF544F;
            font-size: 28rpx;
            margin-top: 36rpx;
        }

        .wait {
            background: rgba(144, 216, 255, .2);
            color: #15ADFF;
        }
    }

    .active {
        margin-top: 0;

        .wish-item {
            width: 380rpx;
            height: 650rpx;

            img {
                border-radius: 20rpx;
                width: 380rpx;
                height: 380rpx;
            }
        }
    }
}
</style>